<!--
 * @Author: zhangweinan
 * @Date: 2023-07-17 21:17:12
 * @LastEditors: Hzt
 * @LastEditTime: 2024-09-09 21:09:50
 * @Description: file content
 * @FilePath: \cty_admin\src\views\dataAnalysis\quantity.vue
-->
<template>
  <div class="chart-container">
    <div class="timer">
      <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="onchangeTime">
      </el-date-picker>
      <span class="tip">最长时间30天</span>
    </div>
    <Chart v-if="flag" id="chart1" height="40%" width="100%" :xdata="xdata" :series="series" :legend="legend" />

    <ChartDown v-if="flag" id="chart2" height="40%" width="100%" :xdata="xdataDown" :series="seriesDown" :legend="legendDown" />
  </div>
</template>

<script>
import Chart from "@/components/Charts/Quantity";
import ChartDown from "@/components/Charts/QuantityX86";
import { getDailyLine } from "@/api/dataAnalysis";
export default {
  name: "Quantity",
  components: { Chart, ChartDown },
  data() {
    return {
      xdata: [],
      series: [],
      legend: [],
      xdataDown: [],
      seriesDown: [],
      legendDown: [],
      flag: true,
      value1: "",
      pickerMinDate: null,
      pickerMaxDate: null,
      pickerOptions: {
        onPick: ({ /* maxDate, */ minDate }) => {
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime();
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate) {
            const day1 = 30 * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate + day1;
            let minTime = this.pickerMinDate - day1;
            return (
              time.getTime() > maxTime ||
              time.getTime() < minTime ||
              time.getTime() > Date.now()
            );
          } else {
            return time.getTime() > Date.now();
          }
        },
      },
    };
  },
  created() {
    // const  nowDay = new Date();
    //获取分析数据
    this.getData();
  },
  methods: {
    getData() {
      this.flag = false;
      // getDailyQuantityLine({
      //   startDay: this.startDay,
      //   endDay: this.endDay,
      // }).then((res) => {
      //   let { deviceCount, avgTotalProfit, xdata } = res.data;
      //   this.deviceCount = deviceCount || [];
      //   this.avgTotalProfit = avgTotalProfit || [];
      //   this.xdata = xdata || [];
      //   this.flag = true;
      // });
      this.getDailyLineReq2(this.startDay, this.endDay);
      this.getDailyLineReq1(this.startDay, this.endDay);
    },
    onchangeTime(param) {
      this.startDay = this.parseTime(param[0]);
      this.endDay = this.parseTime(param[1]);

      this.getData();
    },
    getDailyLineReq2(startDay, endDay) {
      getDailyLine({ startDay: startDay, endDay: endDay, deviceType: 2 }).then(res => {
        let { series, xaxisData, legend } = res.data;
        this.xdata = xaxisData || [];
        this.series = series || [];
        this.legend = legend || [];
      }).catch(err => { console.log(err) })
    },
    getDailyLineReq1(startDay, endDay) {
      getDailyLine({ startDay: startDay, endDay: endDay, deviceType: 1 }).then(res => {
        let { series, xaxisData, legend } = res.data;
        this.xdataDown = xaxisData || [];
        this.seriesDown = series || [];
        this.legendDown = legend || [];
        this.flag = true;
      }).catch(err => { console.log(err) })
    }
  },
};
</script>
<!-- height: calc(100vh - 100px); -->
<style scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 100px);
}
.timer {
  padding: 20px;
}
.tip {
  margin-left: 20px;
}
</style>
